<template>
  <div class="container">
    <div class="login-wrapper">
      <div class="back" @click="back"><img src="../../../assets/image/返回.png" alt="">返回登录</div>
      <div class="header">注册</div>
      <div class="form-wrapper">
        <input type="text" name="username" placeholder="用户名" class="input-item" @input="accountInput">
        <input type="password" name="password" placeholder="密码" class="input-item" @input="infoInput">
        <div class="btn" @click="register">注册</div>
      </div>
    </div>
  </div>
</template>

<script>
import {requestRegister} from "../../../network/request";
export default {
  name: "register",
  components:{

  },
  data(){
    return {
      acc:'',
      code:''
    }
  },
  methods:{
    back(){
      this.$router.push('main')
    },
    register() {
      let acc = this.acc
      let code = this.code
      if(!(acc||code)){
        this.$toast('请完善信息！')
      }else {
        requestRegister([acc,code]).then(res =>{
          this.$toast('注册成功！')
         setTimeout(()=>{
            this.$router.push('main')
          },1000)
        })
      }
    },
    accountInput(e) {
      this.acc = e.target.value
    },
    infoInput(e) {
      this.code = e.target.value
    },
  }
}
</script>

<style scoped>
.back{
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-left: -28px;
  color: white;
}
.back img{
  width: 25px;
  height: 25px;
}
.register{
  color: #abc1ee;
}
.container {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Fback_pic%2F04%2F12%2F21%2F55581b5721aaff7.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654588526&t=e0e680541d21dd98535b2f86db4b14fd ");
  justify-content: center;
  background-size: cover;
  object-fit: scale-down;
}
.form-wrapper{
  margin-top: 100px;
  padding-bottom: 50px;
  position: relative;
  z-index: 10;
}
.login-wrapper {
  background-color:rgba(255,255,255,0.2);
  border-radius: 15px;
  padding: 0 50px;
  position: absolute;
  /*opacity: 0.5;*/
  /*left: 50%;*/
  /*top: 50%;*/
  /*transform: translate(-50%, -50%);*/
}
.header {
  font-size: 38px;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  color: white;
}
.input-item {
  border-radius: 20px;
  display: block;
  width: 250px;
  margin-bottom: 20px;
  border: 0;
  padding: 10px;
  opacity: 0.8;
  border-bottom: 1px solid rgb(128, 125, 125);
  font-size: 15px;
  outline: none;
}
.input-item::placeholder {
  text-transform: uppercase;
}
.btn {
  text-align: center;
  padding: 10px;
  width: 100%;
  margin-top: 40px;
  background-color: #fff;
  color: black;
  opacity: 0.5;
  border-radius: 15px;
  font-size: 20px;
}
.msg {
  display: flex;
  justify-content: center;
  text-align: center;
  line-height: 88px;
}
</style>
